<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Painting in Mono Winforms</title>
<link rel="stylesheet" href="/cfg/format.css" type="text/css">
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<meta name="keywords" content="Mono, C#, painting, Winforms, tutorial, programming">
<meta name="description" content="Painting in Mono Winforms">
<meta name="language" content="en">
<meta name="author" content="Jan Bodnar">
<meta name="distribution" content="global">

<script type="text/javascript" src="/lib/jquery.js"></script>
<script type="text/javascript" src="/lib/common.js"></script>

</head>

<body>

<div class="container">

<div id="wide_ad" class="ltow">
<script type="text/javascript"><!--
google_ad_client = "pub-9706709751191532";
/* 160x600, August 2011 */
google_ad_slot = "2484182563";
google_ad_width = 160;
google_ad_height = 600;
//-->
</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
</div>

<div class="content">


<a href="/" title="Home">Home</a>&nbsp;
<a href="..">Contents</a>


<h1>Painting in Mono Winforms</h1>


<p>
In this part of the Mono Winforms tutorial, we will do some painting. 
Painting is used, when we want to change or enhance an existing control. Or if we are 
creating a custom control from scratch. To do the painting, we use the 
painting API provided by the Winforms library. The painting is done within a method, 
that we plug into the <b class="keyword">Paint</b> event. 
</p>

<script type="text/javascript"><!--
google_ad_client = "pub-9706709751191532";
/* NewSquare */
google_ad_slot = "0364418177";
google_ad_width = 300;
google_ad_height = 250;
//-->
</script> 
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js"> 
</script> 

<p>
The <b>System.Drawing</b> namespace provides access to <b>GDI+</b> basic graphics functionality. 
More advanced functionality is provided in the System.Drawing.Drawing2D, 
System.Drawing.Imaging, and System.Drawing.Text namespaces.
The <b>Graphics</b> class provides methods for drawing on the form.
</p>

<h2>Lines</h2>

<p>
Our first example will draw lines on the <b class="keyword">Form</b> control.
</p>

<div class="codehead">lines.cs</div>
<pre class="code">
using System;
using System.Drawing;
using System.Drawing.Drawing2D;
using System.Windows.Forms;

class MForm : Form {

    public MForm() {
        Text = "Lines";
        Size = new Size(280, 270);
        ResizeRedraw = true;

        Paint += new PaintEventHandler(OnPaint);
        CenterToScreen();
    }


    void OnPaint(object sender, PaintEventArgs e)
    {      
        Graphics g = e.Graphics;
        Pen pen = new Pen(Color.Black, 1);

        pen.DashStyle = DashStyle.Dot;
        g.DrawLine(pen, 20, 40, 250, 40);

        pen.DashStyle = DashStyle.DashDot;
        g.DrawLine(pen, 20, 80, 250, 80);

        pen.DashStyle = DashStyle.Dash;
        g.DrawLine(pen, 20, 120, 250, 120);

        pen.DashStyle = DashStyle.DashDotDot;
        g.DrawLine(pen, 20, 160, 250, 160);

        pen.DashPattern = new float[] {6f, 8f, 1f, 1f, 1f, 1f, 1f, 1f };
        g.DrawLine(pen, 20, 200, 250, 200);

        g.Dispose();
    }
}

class MApplication {
    public static void Main() {
        Application.Run(new MForm());
    }
}
</pre>


<p>
We draw five lines on the form. Each line has 
different <b class="keyword">DashStyle</b>.  
</p>

<pre class="explanation">
 ResizeRedraw = true;
</pre>

<p>
When we resize the form, it is automatically redrawn. 
This is not the default behavior. 
</p>


<pre class="explanation">
 Paint += new PaintEventHandler(OnPaint);
</pre>

<p>
Paint events are delivered to the <b class="keyword">OnPaint()</b> method. 
</p>

<pre class="explanation">
 void OnPaint(object sender, PaintEventArgs e)
 {
     ... 
 }
</pre>

<p>
This is the signature of the <b class="keyword">OnPaint()</b> method. 
</p>


<pre class="explanation">
 Graphics g = e.Graphics;
</pre>

<p>
In order to paint on the form, we must get the <b class="keyword">Graphics</b> object. 
Painting on a form is actually calling various methods of the <b class="keyword">Graphics</b> object.
</p>

<pre class="explanation">
 Pen pen = new Pen(Color.Black, 1);

 pen.DashStyle = DashStyle.Dot;
 g.DrawLine(pen, 20, 40, 250, 40);
</pre>

<p>
We create a <b class="keyword">Pen</b> object. This object is used 
to draw outlines of shapes. Than we set a dotted 
<b class="keyword">DashStyle</b>. Finally we draw the line with the 
<b class="keyword">DrawLine()</b> method. The first 
parameter is the pen object. The next four values are x and y values 
of starting and ending points of the line. 
</p>

<pre class="explanation">
 pen.DashPattern = new float[] {6f, 8f, 1f, 1f, 1f, 1f, 1f, 1f };
</pre>

<p>
There are several built-in <b class="keyword">DashStyle</b> values. 
We can create our own style by using the <b class="keyword">DashPattern</b>
property. It may look difficult at the first sight. But the pattern 
is simply an array of fill and empty values. 
</p>

<pre class="explanation">
 g.Dispose();
</pre>

<p>
We know that C# language uses garbage collection. So why are we explicitly 
releasing resources? This is to increase efficiency. 
We are helping the garbage collector. 
</p>

<br>
<img src="/img/gui/sharpwinf/lines.png" alt="lines">
<div class="figure">Figure: Lines</div>


<h2>Colors</h2>

<p>
A color in Winforms library represents an ARGB (alpha, red, green, blue) 
color. It is a combination of Alpha, Red, Green, and Blue (RGB) intensity values. 
There are also predefined color names, that we can use in painting.
</p>

<div class="codehead">colors.cs</div>
<pre class="code">
using System;
using System.Drawing;
using System.Drawing.Drawing2D;
using System.Windows.Forms;

class MForm : Form {

    public MForm() {
        Text = "Colors";
        Size = new Size(360, 300);

        Paint += new PaintEventHandler(OnPaint);

        CenterToScreen();
    }


    void OnPaint(object sender, PaintEventArgs e)
    {      
        Graphics g = e.Graphics;
            
        g.FillRectangle(Brushes.Sienna, 10, 15, 90, 60);
        g.FillRectangle(Brushes.Green, 130, 15, 90, 60);
        g.FillRectangle(Brushes.Maroon, 250, 15, 90, 60);
        g.FillRectangle(Brushes.Chocolate, 10, 105, 90, 60);
        g.FillRectangle(Brushes.Gray, 130, 105, 90, 60);
        g.FillRectangle(Brushes.Coral, 250, 105, 90, 60);
        g.FillRectangle(Brushes.Brown, 10, 195, 90, 60);
        g.FillRectangle(Brushes.Teal, 130, 195, 90, 60);
        g.FillRectangle(Brushes.Goldenrod, 250, 195, 90, 60);

        g.Dispose();

    }
}

class MApplication {
    public static void Main() {
        Application.Run(new MForm());
    }
}
</pre>

<p>
We draw nine rectangles with nine different colors. 
</p>

<pre class="explanation">
 g.FillRectangle(Brushes.Sienna, 10, 15, 90, 60);
</pre>

<p>
The <b class="keyword">FillRectagle()</b> method fills a specified 
rectangle with a brush. A brush can be
a color or a pattern. There are some predefined colors available. 
We can get them from the <b class="keyword">Brushes</b> 
enumeration. The last four values are the x, y values of the topleft 
point and the width and height of the rectangle. 
</p>

<br>
<img src="/img/gui/sharpwinf/colors.png" alt="Colors">
<div class="figure">Figure: Colors</div>


<h2>Hatches</h2>

<p>
The <b class="keyword">HatchBrush</b> object is used to fill the interiors of the shapes. 
There are several built-in patterns, that we can use.
</p>

<div class="codehead">hatches.cs</div>
<pre class="code">
using System;
using System.Drawing;
using System.Drawing.Drawing2D;
using System.Windows.Forms;

class MForm : Form {

    public MForm() {
        Text = "Hatches";
        Size = new Size(360, 300);

        Paint += new PaintEventHandler(OnPaint);

        CenterToScreen();
    }


    void OnPaint(object sender, PaintEventArgs e)
    {      
        Graphics g = e.Graphics;
            
        HatchBrush hb = new HatchBrush(HatchStyle.Cross, Color.Black, this.BackColor);
        g.FillRectangle(hb, 10, 15, 90, 60);

        hb = new HatchBrush(HatchStyle.Percent05, Color.Black, this.BackColor);
        g.FillRectangle(hb, 130, 15, 90, 60);

        hb = new HatchBrush(HatchStyle.SolidDiamond, Color.Black, this.BackColor);
        g.FillRectangle(hb, 250, 15, 90, 60);

        hb = new HatchBrush(HatchStyle.DiagonalBrick, Color.Black, this.BackColor);
        g.FillRectangle(hb, 10, 105, 90, 60);

        hb = new HatchBrush(HatchStyle.Divot, Color.Black, this.BackColor);
        g.FillRectangle(hb, 130, 105, 90, 60);

        hb = new HatchBrush(HatchStyle.Wave, Color.Black, this.BackColor);
        g.FillRectangle(hb, 250, 105, 90, 60);

        hb = new HatchBrush(HatchStyle.ZigZag, Color.Black, this.BackColor);
        g.FillRectangle(hb, 10, 195, 90, 60);

        hb = new HatchBrush(HatchStyle.Sphere, Color.Black, this.BackColor);
        g.FillRectangle(hb, 130, 195, 90, 60);

        hb = new HatchBrush(HatchStyle.Shingle, Color.Black, this.BackColor);
        g.FillRectangle(hb, 250, 195, 90, 60);

        hb.Dispose();
        g.Dispose();
    }
}

class MApplication {
    public static void Main() {
        Application.Run(new MForm());
    }
}
</pre>

<p>
This time we fill nine rectangles with nine different patterns, called hatches. 
</p>

<pre class="explanation">
 HatchBrush hb = new HatchBrush(HatchStyle.Cross, Color.Black, this.BackColor);
</pre>

<p>
Here we create a <b class="keyword">HatchBrush</b> object. The parameters 
are the hatch style and the foreground and the background colors. The background 
color is set to the color of the form, so that it 
looks like we have drawn onto the form. 
</p>

<pre class="explanation">
 g.FillRectangle(hb, 10, 15, 90, 60);
</pre>

<p>
We fill the rectangle with the specified hatch brush. 
</p>

<br>
<img src="/img/gui/sharpwinf/hatches.png" alt="Hatches">
<div class="figure">Figure: Hatches</div>


<h2>Gradients</h2>

<p>
In computer graphics, gradient is a smooth blending of shades from light to dark 
or from one color to another. In 2D drawing programs and paint programs, gradients 
are used to create colorful backgrounds and special effects as well as to simulate 
lights and shadows. (answers.com) 
</p>

<div class="codehead">gradients.cs</div>
<pre class="code">
using System;
using System.Drawing;
using System.Drawing.Drawing2D;
using System.Windows.Forms;

class MForm : Form {

    public MForm() {
        Text = "Gradients";
        Size = new Size(350, 350);

        Paint += new PaintEventHandler(OnPaint);

        CenterToScreen();
    }


    void OnPaint(object sender, PaintEventArgs e)
    {      
        Graphics g = e.Graphics;

        Point pt1 = new Point(5, 5);
        Point pt2 = new Point(25, 25);
        Brush lg = new LinearGradientBrush(pt1, pt2, Color.Red, Color.Black);
        g.FillRectangle(lg, 20, 20, 300, 40);
        
        pt1 = new Point(5, 25);
        pt2 = new Point(20, 2);
        lg = new LinearGradientBrush(pt1, pt2, Color.Yellow, Color.Black);
        g.FillRectangle(lg, 20, 80, 300, 40);

        pt1 = new Point(5, 25);
        pt2 = new Point(2, 2);
        lg = new LinearGradientBrush(pt1, pt2, Color.Green, Color.Black);
        g.FillRectangle(lg, 20, 140, 300, 40);

        pt1 = new Point(25, 25);
        pt2 = new Point(15, 25);
        lg = new LinearGradientBrush(pt1, pt2, Color.Blue, Color.Black);
        g.FillRectangle(lg, 20, 200, 300, 40);
        
        pt1 = new Point(0, 10);
        pt2 = new Point(0, 20);
        lg = new LinearGradientBrush(pt1, pt2, Color.Orange, Color.Black);
        g.FillRectangle(lg, 20, 260, 300, 40);            

        lg.Dispose();
        g.Dispose();
    }
}

class MApplication {
    public static void Main() {
        Application.Run(new MForm());
    }
}
</pre>

<p>
We draw five rectangles which are filled with different linear gradients. 
</p>

<pre class="explanation">
 Point pt1 = new Point(5, 5);
 Point pt2 = new Point(25, 25);
</pre>

<p>
These two are the controlling points of the linear gradient brush. 
</p>

<pre class="explanation">
 Brush lg = new LinearGradientBrush(pt1, pt2, Color.Red, Color.Black);
</pre>

<p>
We create the <b class="keyword">LinearGradientBrush</b> object. We use two controlling points and
two blending colors. 
</p>

<br>
<img src="/img/gui/sharpwinf/gradients.png" alt="Gradients">
<div class="figure">Figure: Gradients</div>

<h2>Drawing string</h2>

<p>
To draw string on the Winforms <b class="keyword">Form</b>, we 
use the <b class="keyword">DrawString()</b> method. 
</p>

<div class="codehead">lyrics.cs</div>
<pre class="code">
using System;
using System.Drawing;
using System.Drawing.Drawing2D;
using System.Windows.Forms;

class MForm : Form {

    public MForm() {

        Text = "You know I'm No Good";
        Size = new Size(380, 450);

        Paint += new PaintEventHandler(OnPaint);
        CenterToScreen();
    }


    void OnPaint(object sender, PaintEventArgs e)
    {      
        Graphics g = e.Graphics;
             
        Font ft = new Font("Purisa", 10);
        SolidBrush br = new SolidBrush(Color.Black);

        PointF pt = new PointF(20.0f, 20.0f);             
        g.DrawString("Meet you downstairs in the bar and heard", ft, br, pt);

        pt = new PointF(20.0f, 50.0f);             
        g.DrawString("Your rolled up sleeves and your skull t-shirt", ft, br, pt);

        pt = new PointF(20.0f, 80.0f);             
        g.DrawString("You say why did you do it with him today?", ft, br, pt);

        pt = new PointF(20.0f, 110.0f);             
        g.DrawString("And sniffed me out like I was tanqueray", ft, br, pt);

        pt = new PointF(20.0f, 160.0f);             
        g.DrawString("Cause you’re my fella, my guy", ft, br, pt);

        pt = new PointF(20.0f, 190.0f);             
        g.DrawString("Hand me your stella and fly", ft, br, pt);

        pt = new PointF(20.0f, 220.0f);             
        g.DrawString("By the time I’m out the door", ft, br, pt);

        pt = new PointF(20.0f, 250.0f);             
        g.DrawString("You tear me down like roger moore", ft, br, pt);

        pt = new PointF(20.0f, 300.0f);             
        g.DrawString("I cheated myself", ft, br, pt);

        pt = new PointF(20.0f, 330.0f);             
        g.DrawString("Like I knew I would", ft, br, pt);

        pt = new PointF(20.0f, 360.0f);             
        g.DrawString("I told ya, I was trouble", ft, br, pt);

        pt = new PointF(20.0f, 390.0f);             
        g.DrawString("You know that I’m no good", ft, br, pt);

        g.Dispose();
    }
}

class MApplication {
    public static void Main() {
        Application.Run(new MForm());
    }
}
</pre>

<p>
In our example, we draw lyrics of a song on the Winforms form. 
</p>

<pre class="explanation">
 Font ft = new Font("Purisa", 10);
</pre>

<p>
We use the Purisa font, of 10 pts height.
</p>

<pre class="explanation">
 PointF pt = new PointF(20.0f, 20.0f);   
</pre>

<p>
To draw string on the form, we must use floating point values. 
</p>

<pre class="explanation">
 g.DrawString("Meet you downstairs in the bar and heard", ft, br, pt);
</pre>

<p>
The <b class="keyword">DrawString()</b> method takes the following
parameters: text to draw, font, brush and 
the <b class="keyword">PointF</b> object.
</p>

<br>
<img src="/img/gui/sharpwinf/lyrics.png" alt="Lyrics">
<div class="figure">Figure: Lyrics</div>


<h2>Drawing image</h2>

<p>
In our last example we will draw an image on the <b class="keyword">Form</b> control. 
</p>

<div class="codehead">redrock.cs</div>
<pre class="code">
 using System;
 using System.Drawing;
 using System.Windows.Forms;

class MForm : Form {

    private Bitmap castle;

    public MForm() {
        Text = "Red Rock";
        loadImage();
        ClientSize = new Size(castle.Width, castle.Height);

        Paint += new PaintEventHandler(OnPaint);

        CenterToScreen();
    }

    void loadImage() {
        try {    
            castle = new Bitmap("redrock.png");
        } catch (Exception e) {
            Console.WriteLine(e.Message);
            Environment.Exit(1);
        }
    }

    void OnPaint(object sender, PaintEventArgs e)
    {      
      Graphics g = e.Graphics;

      Rectangle r = new Rectangle(1, 1, castle.Width, castle.Height);
      g.DrawImage(castle, r);
    }
}

class MApplication {
    public static void Main() {
        Application.Run(new MForm());
    }
}
</pre>

<p>
This code example draws an image of a castle on the form. 
</p>

<pre class="explanation">
 try {    
     castle = new Bitmap("redrock.png");
 } catch (Exception e) {
     Console.WriteLine(e.Message);
     Environment.Exit(1);
 }
</pre>

<p>
We load an image of a castle.
</p>

<pre class="explanation">
 Rectangle r = new Rectangle(1, 1, castle.Width, castle.Height);
</pre>

<p>
We determine the rectangle that we will draw.
</p>

<pre class="explanation">
 g.DrawImage(castle, r);
</pre>

<p>
This line actually draws the image. 
</p>

<br>
<img src="/img/gui/sharpwinf/image.jpg" alt="Image">
<div class="figure">Figure: Image</div>

<hr class="btm">

<p>
In this chapter, we did some painting in Mono Winforms library.  
</p>


<div class="botNav, center">
<span class="botNavItem"><a href="/">Home</a></span> ‡ <span class="botNavItem"><a href="..">Contents</a></span> ‡ 
<span class="botNavItem"><a href="#">Top of Page</a></span>
</div>


<div class="footer">
<div class="signature">
<a href="/">ZetCode</a> last modified December 27, 2008  <span class="copyright">&copy; 2007 - 2012 Jan Bodnar</span>
</div>
</div>

</div> <!-- content -->

</div> <!-- container -->

</body>
</html>
